<template>
  <div class="app-container">
    <div class="header-section">
      <div class="back-button">
        <el-button @click="$router.push('/main/renshi/zhaoping/luyongtzs/luyongtzs')" icon="el-icon-back">返回</el-button>
      </div>
      <h2>录用通知书列表</h2>
    </div>
    <!-- 搜索区域 -->
    <div class="table-operations">
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="应聘者姓名">
          <el-input v-model="queryParams.applicantName" placeholder="请输入应聘者姓名"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="queryParams.deptName" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="queryParams.positionName" placeholder="请输入岗位名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button type="danger" :disabled="!selectedIds.length" @click="handleBatchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>

      <!-- 操作按钮区域 -->
    </div>

    <!-- 表格区域 -->
    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" border
      style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="applicantName" label="应聘者姓名" width="120"></el-table-column>
      <el-table-column prop="deptName" label="部门" width="120"></el-table-column>
      <el-table-column prop="positionName" label="岗位" width="120"></el-table-column>
      <el-table-column prop="reportDate" label="报到日期" width="180">
        <template slot-scope="scope">
          {{ scope.row.reportDate }}
        </template>
      </el-table-column>
      <el-table-column prop="companyName" label="公司名称" width="200"></el-table-column>
      <el-table-column prop="contactPerson" label="联系人"></el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryParams.current" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.size"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getPageApi, removeApi, batchRemoveApi } from '@/api/luyong'
import { formatDate, DATE_FORMAT } from '@/utils/date'

export default {
  name: 'LuyongTzsList',
  data() {
    return {
      loading: false,
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        applicantName: '',
        deptName: '',
        positionName: ''
      },
      // 表格数据
      tableData: [],
      total: 0,
      // 选中的记录ID
      selectedIds: []
    }
  },
  created() {
    this.getList()
  },
  filters: {
    formatDate(value) {
      return formatDate(value, DATE_FORMAT.datetime)
    }
  },
  methods: {
    // 获取列表数据
    async getList() {
      this.loading = true
      try {
        const res = await getPageApi(this.queryParams)
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      } catch (error) {
        console.error('获取列表失败：', error)
      }
      this.loading = false
    },
    // 查询
    handleQuery() {
      this.queryParams.current = 1
      this.getList()
    },
    // 重置查询
    resetQuery() {
      this.queryParams = {
        current: 1,
        size: 10,
        applicantName: '',
        deptName: '',
        positionName: ''
      }
      this.getList()
    },
    // 选择变化
    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id)
    },
    // 新增
    handleAdd() {
      this.$router.push('/main/renshi/zhaoping/luyongtzs/luyongtzs')
    },
    // 查看
    handleView(row) {
      this.$router.push({
        path: '/main/renshi/zhaoping/luyongtzs/luyongtzs',
        query: {
          mode: 'view',
          id: row.id
        }
      })
    },
    // 编辑
    handleEdit(row) {
      this.$router.push({
        path: '/main/renshi/zhaoping/luyongtzs/luyongtzs',
        query: {
          mode: 'edit',
          id: row.id
        }
      })
    },
    // 删除
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该记录?', '提示', {
          type: 'warning'
        })
        await removeApi(row.id)
        this.$message.success('删除成功')
        this.getList()
      } catch (error) {
        console.error('删除失败：', error)
      }
    },
    // 批量删除
    async handleBatchDelete() {
      if (!this.selectedIds.length) {
        this.$message.warning('请选择要删除的记录')
        return
      }
      try {
        await this.$confirm(`确认删除选中的 ${this.selectedIds.length} 条记录?`, '提示', {
          type: 'warning'
        })
        await batchRemoveApi(this.selectedIds)
        this.$message.success('批量删除成功')
        this.getList()
      } catch (error) {
        console.error('批量删除失败：', error)
      }
    },
    // 分页大小变化
    handleSizeChange(val) {
      this.queryParams.size = val
      this.getList()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.queryParams.current = val
      this.getList()
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  height: calc(100vh - 40px);
width: 1200px;
margin: 0 auto;
}

.header-section {
  margin-bottom: 30px;
  padding: 20px;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

}

.back-button {
  position: absolute;
  top: 30%;
}

.table-operations {
  /* margin-bottom: 20px; */
}

.el-table {
  margin-top: 15px;
}

.el-pagination {
  margin-top: 15px;
  text-align: right;
}
</style>